import React, {Component} from 'react'
import {
    View,
    StyleSheet,
    Image,
    Text,
} from 'react-native'
import HotTopItem from "./HotTopItem";
import HotBottomItem from "./HotBottomItem";

export default class HotRecommend extends Component {

    constructor(props) {
        super(props)
        this.state = {
            topDatas: [],
            bottomDatas: []
        }
        this.fetchData();
    }

    fetchData() {
        fetch('http://localhost:8081/localdata/HomeHotData.json')
            .then((response) => response.json())
            .then((responseJson) => {

                this.setState({
                    topDatas: responseJson.topData,
                    bottomDatas: responseJson.bottomData,
                })
            }).done();
    }

    render() {
        return (
            <View style={styles.container}>

                {this.renderTitle()}
                <View style={styles.topContent}>
                    {this.renderTopContent()}
                </View>
                <View style={styles.bottomContent}>
                    {this.renderBottomContent()}
                </View>
            </View>
        )
    }

    renderTitle() {
        return (
            <View style={styles.titleContainer}>
                <View style={{flexDirection: 'row', alignItems: 'center'}}>
                    <Image style={styles.titleImage} source={require('../../../imgs/rm.png')}/>
                    <Text style={styles.titleText}>热门频道</Text>
                </View>


                <View style={{flexDirection: 'row', alignItems: 'center'}}>
                    <Text
                        style={styles.subTitleText}>查看全部</Text>
                    <Image style={{width: 10, height: 15}}
                           source={require('../../../imgs/icon_cell_rightarrow.png')}/>
                </View>
            </View>
        )
    }

    renderTopContent() {
        var itemArr = []
        var topData = this.state.topDatas
        for (var i = 0; i < topData.length; i++) {
            itemArr.push(
                <HotTopItem
                    key={i}
                    titleColor={'rgba(0,0,0, 0.6)'}
                    title={topData[i].title}
                    subTitle={topData[i].subTitle}
                    image={topData[i].hotImage}
                />
            )
        }

        return itemArr;
    }

    renderBottomContent() {
        var itemArr = []
        var bottomData = this.state.bottomDatas

        console.log('------热门频道-------')
        console.log(bottomData)
        for (var i = 0; i < bottomData.length; i++) {
            itemArr.push(
                <HotBottomItem
                    key={i}
                    titleColor={'rgba(0,0,0, 0.6)'}
                    title={bottomData[i].title}
                    subTitle={bottomData[i].subTitle}
                    image={bottomData[i].hotImage}
                />
            )
        }

        return itemArr;
    }
}

const styles = StyleSheet.create({
    bottomContent: {
        flexDirection:'row',
        justifyContent: 'space-around',
        backgroundColor: '#fff',
        paddingTop:2,
        paddingRight:4,
        paddingLeft:4,
        paddingBottom:4
    },
    topContent: {
        paddingBottom:2,
        paddingLeft:4,
        paddingRight:4,
        paddingTop:4,
        flexDirection: 'row',
        justifyContent: 'space-around',
        backgroundColor: '#fff'
    },
    subTitleText: {
        fontSize: 14,
        marginRight: 5,
    },
    titleText: {
        fontSize: 16,
        marginLeft: 3,
        color: '#1f1f1f',
    },
    titleImage: {
        width: 30,
        height: 30
    },
    titleContainer: {
        height: 50,
        marginBottom: 1,
        flexDirection: 'row',
        justifyContent: 'space-between',
        paddingLeft: 15,
        paddingRight: 15,
        backgroundColor: '#fff'
    },
    container: {
        marginTop: 10,
    }
})